<template>
  <div class="login">
    <div class="login-img"></div>
    <div class="login-container">
      <h2>电商后台管理系统</h2>
      <el-form 
      ref="formRef"
      :model="user"
      :rules="rules"
      >
        <el-form-item prop="username">
          <el-input v-model="user.username" placeholder="请输入用户名">
            <template #prefix>
              <el-icon class="el-input__icon"><User /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="user.password"  type="password" placeholder="请输入密码">
            <template #prefix>
              <el-icon class="el-input__icon"><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <div style="color: #333">登录表示您已同意<a style="color: blue;">《服务条款》</a></div>
          <el-button style="width:100%" type="primary" @click="submit">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      user: {
        username: 'admin',
        password: '123456',
      },
    }
  },
  methods: {
    /**
     * 处理用户登录
     */
    submit() {
      this.$router.push('/dashboard')       
    }
  }
}
</script>








<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
 
  position: relative;

   .login-img {
  width: 100%;
  height: 100%;
  background: url('../../img/bj.jpg') no-repeat center center;
  background-size: cover;
  opacity: .6;
}
  

  .login-container {
  width: 400px;
  height: 400px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  padding: 0 20px;
}
}

</style>